/*
* @moudule:@/views/budget/examine/reductionAnalysis
* @author:zengfx
* @date:2020-12-07
* 还原分析
*/
<template>
  <div class="reductionAnalysis_container">
    <header>
      <p>还原分析</p>
      <el-button size="mini" @click="handle_back">返回</el-button>
    </header>
    <main>
      <el-form :inline="true" :model="form" class="main_searchBar">
        <el-form-item label="区域:">
          <dx-cascader :area_id.sync="form.areaId" ref="cascader" />
        </el-form-item>
        <el-form-item label="收入指标:">
          <el-select @change="handleCode" size="mini" v-model="form.code" clearable>
            <el-option v-for="(item, index) in codeList" :key="index" :label="item.indexName" :value="item.indexCode"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button size="mini" id="search_btn" @click="handle_search">查询</el-button>
          <!-- <el-button size="mini" id="export_btn" @click="handle_export"
            >导出</el-button
          >-->
        </el-form-item>
      </el-form>
      <div class="main_navBar">
        <div class="area">
          <div class="it" v-for="(item, index) in areaList" :key="index" @click="changeArea(index)">
            <span class="td">{{ item.label }}</span>
            <span>-></span>
          </div>
        </div>
        <span style="flex:1; text-align: right;padding-right: 15px;">单位:万元</span>
      </div>
      <el-table size="mini" height="65vh" :header-cell-style="{ background: '#eef1f6' }" :data="tableData" v-loading="tableLoading" border style="width: 100%">
        <el-table-column label="区域" fixed="left" width="160">
          <template slot-scope="scope">
            <span class="hover" @click="goArea(scope.row, scope.$index)" v-text="scope.row.areaName || scope.row.area_NAME"></span>
          </template>
        </el-table-column>
        <!--  -->
        <template>
          <el-table-column min-width="120" align="center" v-for="(item, index) in titleList" :key="index" :label="item">
            <template slot-scope="scope">
              <span>{{scope.row["value" + (index+1)]}}</span>
            </template>
          </el-table-column>
        </template>
      </el-table>
    </main>
  </div>
</template>

<script>
import { $budgetAPI } from '@/api';
import { getCookie } from '@/common/js/cookie';
import { setSessionStorage, getSessionStorage, removeSessionStorage } from '@/common/js/storage';
export default {
    data() {
        return {
            form: {
                areaId: '',
                code: '',
                areaName: ''
            },
            codeList: [],
            showStorage: '',
            areaList: [],
            accountInfo: null,
            tableLoading: false,
            tableData: [],
            titleList: []
        };
    },
    mounted() {
        var that = this;
        that.accountInfo = JSON.parse(getSessionStorage('accountInfo'));
        that.form.areaId = that.accountInfo.areaId;
        that.form.areaName = that.accountInfo.areaName;
        that.initData();
    },
    methods: {
        handleCode() {},
        handle_search() {},
        handle_back() {
            this.$router.go(-1);
        },
        goArea(val, index) {
            console.log(val,'val')
            var that = this;

            var obj = {
                areaId: val.areaId,
                indexCode: that.form.code,
                custerCode: that.form.customer,
                storageCode: that.form.storageCode,
                showHb: that.checked ? '1' : '0',
                type: that.type
            };
            if (val.areaLvl != 6) {
                that.form.areaId = val.areaId;
                that.getData(obj);
            }
        },
        changeArea(val) {
            var that = this;

            var obj = {
                areaId: that.areaList[val].value,
                indexCode: that.form.code
            };
            that.form.areaId = that.areaList[val].value;
            that.getData(obj);
        },
        getCodeList() {
            var that = this;
            return new Promise(resolve => {
                $budgetAPI.getIndexCodeList(
                    {},
                    res => {
                        if (res && res.code == 0) {
                            resolve(res.content);
                        }
                    },
                    err => {}
                );
            });
        },
        async initData() {
            var that = this,
                code,
                data,
                obj = {};

            code = await that.getCodeList();
            that.codeList = code;
            that.form.code = code[0].indexCode;

            obj = {
                areaId: that.form.areaId,
                indexCode: code[0].indexCode.toString()
            };
            that.getData(obj);
        },
        getData(obj) {
            var that = this,
                data = '';

            that.tableLoading = true;
            $budgetAPI.reductionAnalysis(
                {
                    areaId: obj.areaId,
                    indexCode: obj.indexCode
                },
                res => {
                    if (res.content.code == 0) {
                        data = res.content.content.data;
                        that.titleList = res.content.content.titles;
                        that.tableData = data;
                        that.tableLoading = false;
                        that.areaIds = res.content.content.areaIds.split(',');
                        that.areaNames = res.content.content.areaNames.split('->');
                        that.areaList = [];
                        that.areaIds.map((it, i) => {
                            var o = {
                                label: that.areaNames[i],
                                value: that.areaIds[i]
                            };
                            that.areaList.push(o);
                        });
                    }
                },
                err => {
                    console.log(err);
                }
            );
        }
    }
};
</script>

<style lang="scss" scoped>
.reductionAnalysis_container {
    width: 100%;
    height: 100%;
    .hover {
        cursor: pointer;
        color: #3456dc;
    }
    .num {
        &:hover {
            color: #3456dc;
        }
    }
    & > header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #eaeaea;
        height: 40px;
        margin: 0 -20px;
        padding: 0 20px;
        & > p {
            font-weight: bold;
            font-size: 15px;
        }
    }
    & > main {
        padding: 0 10px 10px;
        /deep/ .el-table__fixed-body-wrapper {
            top: 37px !important;
        }
        .main_searchBar {
            border-bottom: 1px solid #d6d9e5;
            /deep/ .el-form-item {
                margin: 6px 10px 6px 0;
            }
            button {
                color: #fff;
                border: none;
                outline: none;
                &:hover {
                    opacity: 0.8;
                }
            }
            #search_btn {
                background-color: #2a90de;
            }
            #export_btn {
                background-color: #2cd531;
            }
        }
        .main_navBar {
            padding: 10px 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .area {
                text-align: left;
                display: flex;
                .it {
                    cursor: pointer;
                    font-size: 14px;
                    display: inline-block;
                    .td {
                        font-weight: bold;
                    }
                    &:last-child {
                        span {
                            &:last-child {
                                display: none;
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>